/**
 * 学习目标：react中事件 this的指向问题
 * 1. 改变调用的方式  onClick={() => this.handleClick()}
 * 2. 👍👍建议使用：箭头函数
 * 3. bind 方法 - 不会再使用
 *      改变 this 指针
 *      call(obj),apply(obj): 改变的同时，直接就调用了
 *      bind(obj),只负责改变，把改变 this 之后的 函数返回来
 *
 */

import React from 'react';
import ReactDOM from 'react-dom';

class Hello extends React.Component {
  state = {
    count: 1,
  };

  /* 
   1. 在严格模式下 ，this不会指向 window，而是指向 undefined
   2. class 就是严格模式
   */
  handleClickOne() {
    console.log('this -----> ', this);
  }
  /* 
     箭头函数，在定义时候的上下文已经确定了 this 的指向，这里指向了 Hello
   */
  handleClick = () => {
    console.log('this -----> ', this);
  };

  // 普通函数可以使用 bind，不建议
  handleXxx() {
    console.log('this -----> ', this);
  }
  /* 
     render中，react做过内部处理，this可以指向当前 class
   */
  render() {
    // console.log('render -----> ', this);
    return (
      <div>
        我是hello组件
        <div>当前count: {this.state.count}</div>
        {/* 1. 改变调用的方式 */}
        <button onClick={() => this.handleClickOne()}>改变调用的方式</button>
        {/* 2. 直接绑定箭头函数 */}
        <button onClick={this.handleClick}>绑定方式的方式调用</button>
        {/* 3. bind 的方式 */}
        <button onClick={this.handleXxx.bind(this)}>bind方式调用</button>
      </div>
    );
  }
}

const dom = (
  <>
    <Hello></Hello>
  </>
);

ReactDOM.render(dom, document.getElementById('root'));
